<script setup>
import { onMounted, ref } from 'vue'
import { getOrderList } from '@/api/order.js'

defineOptions({
  name: 'orderList'
})

onMounted(async () => {
  const res = await getOrderList({
    page: page.value,
    status: status.value
  })
  dataList.value = res.data
})

const tog = async (val) => {
  ;[dataList.value, page.value, status.value, finished.value] = [
    [],
    1,
    val.name,
    false
  ]
  const res = await getOrderList({ page: page.value, status: status.value })
  dataList.value.push(...res.data)
}

const status = ref(0)
const page = ref(1)
const dataList = ref([])

const finished = ref(false)
const loading = ref(false)
const onLoad = async () => {
  page.value = page.value + 1
  const res = await getOrderList({ page: page.value, status: status.value })
  dataList.value.push(...res.data)
  loading.value = false
  if (page.value >= res.meta.pagination.total_pages) finished.value = true
}
</script>

<template>
  <van-tabs
    @click-tab="tog"
    color="red"
    title-inactive-color="gray"
    title-active-color="red"
  >
    <van-tab
      :title="item"
      v-for="(item, index) in [
        '全部',
        '待付款',
        '已支付',
        '发货',
        '交易完成',
        '过期'
      ]"
      :key="item"
      :name="index"
    ></van-tab>
  </van-tabs>

  <van-list
    v-model:loading="loading"
    :finished="finished"
    finished-text="没有更多了"
    @load="onLoad"
  >
    <orderItem
      v-for="items in dataList"
      :key="items.id"
      :data="items"
    ></orderItem>
  </van-list>
</template>

<style scoped lang="scss"></style>
